<%@page import="com.cbd.pojo.Renter"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="spring"
	uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>修改个人信息</title>
 <link rel="stylesheet" href="../../css/bootstrap.min.css">

<style type="text/css">
#theDiv {
	margin-top: 30px;
}


#subBtn{
	margin-top:30px;
	margin-left: 500px;
}
.form-control{
	width:200px;
}

.form-control{
	width:180px;
}
div{
	margin-top:30px;
}
</style>
</head>
<body>
	<div id="theDiv">
		<spring:form id="updateRenterForm" commandName="renter" action="updateRenter.do"
			method="post" onsubmit="return check()">
			<input type="hidden" id="userID" name="userID" value="${sessionScope.myRenter.user.userID}">
			
				<div class="row">
					<div class="col-xs-2">
	          
	                </div>
	                <div class="col-xs-1">
	                    <label style="float:right;">用户名&nbsp;&nbsp;&nbsp;：</label>
	                </div>
	                <div class="col-xs-2">
	                    <label id="renterName"></label>
	                </div>
	                <div class="col-xs-1">
	                   
	                </div>
	                <div class="col-xs-1">
	                    <label style="float:right;">真实姓名:&nbsp;</label>
	                </div>
	                <div class="col-xs-2">
	                    <input id="renterRealName" style="margin-top:-3px;" type="text"  class="form-control" name="renterName" readonly="readonly">
	                </div>
	                <div class="col-xs-1">
	                    
	                </div>
            	</div>
            	<div class="row">
					<div class="col-xs-2">
	          
	                </div>
	                <div class="col-xs-1">
	                    <label style="float:right;">密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;：</label>
	                </div>
	                <div class="col-xs-2">
	                    <input id="renterPwd" style="margin-top:-3px;" class="form-control" name="user.userPWD" type="password"
						onblur="checkPWD()" onfocus="cleanPWD()" placeholder="请输入新密码">
	                </div>
	                <div class="col-xs-1">
	                   <span class="help-inline" id="pwdMessage"></span>
						<spring:errors path="user.userPWD" delimiter=","></spring:errors>
	                </div>
	                <div class="col-xs-1">
	                   <label style="float:right;">电话号码:&nbsp;</label>
	                </div>
	                <div class="col-xs-2">
	                    <input id="renterTel" style="margin-top:-3px;" name="renterTel" type="text"  class="form-control" onblur="checkTel()" onfocus="cleanTel()" placeholder="请输入新电话号码">
	                </div>
	                <div class="col-xs-1">
	                    <span class="help-inline" id="telMessage"></span>
						<spring:errors path="renterTel" delimiter=","></spring:errors>
	                </div>
            	</div>
            	<div class="row">
					<div class="col-xs-2">
	          
	                </div>
	                <div class="col-xs-1">
	                    <label style="float:right;">确认密码：</label>
	                </div>
	                <div class="col-xs-2">
	                    <input id="reInput" style="margin-top:-3px;" type="password" onfocus="cleanRePWD()" onblur="comparePwd()"
					class="form-control" placeholder="请输入新密码">
	                </div>
	                <div class="col-xs-1">
	                    <span class="help-inline" id="compareMessage"></span>
	                </div>
	                <div class="col-xs-1">
	                   <label style="float:right;">身份证号:&nbsp;</label>
	                </div>
	                <div class="col-xs-2">
	                    <input id="renterCard" name="renterCard" style="margin-top:-3px;" class="form-control" readonly="readonly">
	                </div>
	                <div class="col-xs-1">
	                    <spring:errors path="renterCard" delimiter=","></spring:errors>
	                </div>
            	</div>
            	<div class="row">
					<div class="col-xs-2">
	          
	                </div>
	                <div class="col-xs-1">
	                    <label style="float:right;">家庭地址：</label>
	                </div>
	                <div class="col-xs-2">
	                    <input id="renterAddress" style="margin-top:-3px;" class="form-control" name="renterAddress" onblur="checkAddress()" onfocus="cleanAddress()" 
					type="text" class="span3" placeholder="请输入新地址">
	                </div>
	                <div class="col-xs-1">
	                    <span class="help-inline" id="addressMessage"></span>
	                </div>
	                <div class="col-xs-1">
	                   <label style="float:right;">职业描述:&nbsp;</label>
	                </div>
	                <div class="col-xs-2">
	                    <input
					id="renterDescribe" class="form-control" style="margin-top:-3px;" name="renterDescribe" type="text" onblur="checkJob()" onfocus="cleanJob()"
					placeholder="请输入你的职业">
	                </div>
	                <div class="col-xs-1">
	                    <span class="help-inline" id="describeMessage"></span>
	                    <spring:errors path="renterDescribe" delimiter=","></spring:errors>
	                </div>
            	</div>
				
			<button type="submit" id="subBtn" class="btn btn-default">修改</button>
		</spring:form>
	</div>
	<script type="text/javascript" src="../../js/jquery-3.1.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			init();
		})
		function init(){
			findRenter();
		}
		//用当前的renter 填充页面上的位置    两个密码都填充为之前的密码
		function findRenter(){
			var userID = $("#userID").val();
			$.ajax({
				   type: "POST",
				   url: "findRenterByUserID.do",
				   data: {"userID":userID},
				   success: function(renter){
					   $("#renterName").html(renter.user.userName);	
					   $("#renterRealName").val(renter.renterName);  
					   $("#renterCard").val(renter.renterCard);
					   $("#renterPwd").val(renter.user.userPWD);
					   $("#reInput").val(renter.user.userPWD);
					   $("#renterAddress").val(renter.renterAddress);
					   $("#renterTel").val(renter.renterTel);
					   $("#renterDescribe").val(renter.renterDescribe);
				   }
				});
		}
		
		function check() {
			var flag = checkPWD() && checkTel() && checkAddress() && checkJob() &&comparePwd();
			return flag;
		}
		//验证密码  renterPwd pwdMessage
		function checkPWD() {
			var renterPwd = document.getElementById("renterPwd").value;
			var pwdMessage = document.getElementById("pwdMessage");
			var eReg = /^[a-zA-Z0-9_-]{6,20}$/;
			if (renterPwd.length == 0) {
				pwdMessage.innerHTML = "密码不能为空";
				return false;
			} else if (!eReg.test(renterPwd)) {
				pwdMessage.innerHTML = "密码：6-20位字母、数字、下划线"
				return false;
			} else {
				return true;
			}
		}
		//电话号码验证 renterTel   telMessage
		function checkTel() {
			var renterTel = document.getElementById("renterTel").value;
			var telMessage = document.getElementById("telMessage");
			var eReg = /^1[34578]\d{9}$/;
			if (renterTel.length == 0) {
				telMessage.innerHTML = "电话号码不能为空";
				return false;
			} else if (!eReg.test(renterTel)) {
				telMessage.innerHTML = "电话号码格式不正确";
				return false;
			} else {
				return true;
			}
		}
		//地址验证 中文验证   renterAddress    addressMessage
		function checkAddress() {
			var renterAddress = document.getElementById("renterAddress").value;
			var addressMessage = document.getElementById("addressMessage");
			var eReg = /^[\u2E80-\u9FFF]{3,20}$/;
			if (!eReg.test(renterAddress)) {
				addressMessage.innerHTML = "家庭住址：3-20个汉字";
				return false;
			} else {
				return true;
			}
		}
		//职业描述  renterDescribe   describeMessage
		function checkJob() {
			var renterDescribe = document.getElementById("renterDescribe").value;
			var describeMessage = document.getElementById("describeMessage");
			var eReg = /^[\u2E80-\u9FFF]{3,20}$/;
			if (!eReg.test(renterDescribe)) {
				describeMessage.innerHTML = "职业描述：3-20个汉字";
				return false;
			} else {
				return true;
			}
		}
		//两次密码的验证  renterPwd  reInput compareMessage  
		function comparePwd(){
			var renterPwd = document.getElementById("renterPwd").value;
			var reInput = document.getElementById("reInput").value;
			var compareMessage = document.getElementById("compareMessage");
			if(renterPwd != reInput){
				compareMessage.innerHTML = "×";
				return false;
			}else{
				compareMessage.innerHTML="√";
				return true;
			}
		}
		
		//清除内容  
		function cleanPWD() {
			var pwdMessage = document.getElementById("pwdMessage");
			pwdMessage.innerHTML = "";
		}
		function cleanRePWD() {
			var compareMessage = document.getElementById("compareMessage");
			compareMessage.innerHTML = "";
		}
		function cleanTel() {
			var telMessage = document.getElementById("telMessage");
			telMessage.innerHTML = "";
		}
		function cleanAddress() {
			var addressMessage = document.getElementById("addressMessage");
			addressMessage.innerHTML = "";
		}
		function cleanJob() {
			var describeMessage = document.getElementById("describeMessage");
			describeMessage.innerHTML = "";
		}
		
	</script>
</body>
</html>